<template>
  <div>
    <el-form label-width="80px" :model="skuInfo">
      <el-form-item label="SPU名称">
        {{ spuInfo.spuName }}
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="skuInfo.skuName" placeholder="SKU名称" />
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input v-model="skuInfo.price" placeholder="价格(元)" />
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input v-model="skuInfo.weight" placeholder="重量(千克)" />
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input v-model="skuInfo.skuDesc" placeholder="规格描述" type="textarea" rows="4" />
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item v-for="attr in attrInfoList" :key="attr.id" :label="attr.attrName">
            <!-- 动态收集数据到自身品台属性身上 -->
            <el-select v-model="attr.attrOrValueId" placeholder="请选择">
              <el-option v-for="attrValue in attr.attrValueList" :key="attrValue.id" :value="`${attr.id}:${attrValue.id}`" :label="attrValue.valueName" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item v-for="sale in spuSaleAttrList" :key="sale.id" :label="sale.saleAttrName">
            <el-select v-model="sale.saleIdOrValueId" placeholder="请选择">
              <el-option v-for="saleValue in sale.spuSaleAttrValueList" :key="saleValue.id" :value="`${sale.id}:${saleValue.id}`" :label="saleValue.saleAttrValueName" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table border :data="spuImageList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" />
          <el-table-column label="图片">
            <template slot-scope="{ row }">
              <img :src="row.imgUrl" style="width: 100px" />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName" />
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button v-if="row.isDefault == 0" type="primary" size="mini" @click="changeDefault(row)">设为默认</el-button>
              <el-button v-else type="success" size="mini">默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="saveSkuInfo">保存</el-button>
        <el-button size="mini" @click="changeScene">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { message } from 'statuses'

export default {
  data() {
    return {
      attrInfoList: [], // 存储平台属性的数据
      spuSaleAttrList: [], // 存储销售属性
      spuImageList: [], // 存放图片的信息
      // 数据的展示与收集
      skuInfo: {
        // 第一类数据收集:父组件给的数据
        category3Id: 0, // 3级分类 id
        spuId: 0, // 该 spu id
        tmId: 0, // 品牌下拉框的id
        // 第二类:需要通过 v-model 双向绑定收集
        price: 0, // sku价格
        skuDesc: '', // sku描述
        skuName: '', // sku名称
        // spuId: 0,
        weight: '', // sku重量
        // 第三类需要自己书写代码
        skuAttrValueList: [], // 平台属性
        skuImageList: [], // 收集图片字段
        skuSaleAttrValueList: [], // 销售属性
        skuDefaultImg: '', // 默认图片
      },
      // 临时存储已经被复选框选中的row(图片)
      spuImg: [],
      // 当前行的 spuInfo
      spuInfo: {},
    }
  },
  methods: {
    // 发送3个请求获取 图片 销售属性 spu的信息对象
    // 获取 skuform 数据
    async getData(row, category1Id, category2Id, category3Id) {
      // 父组件传递过来的值,进行赋值操作
      this.skuInfo.category3Id = category3Id
      this.skuInfo.tmId = row.tmId
      this.skuInfo.spuId = row.id
      this.spuInfo = row
      // 获取图片的数据
      const res1 = await this.$api.sku.reqSpuImageList(row.id)
      console.log(res1)
      if (res1.code === 200) {
        const resImgList = res1.data
        // 在赋值之前为每一个对象添加一个isDefault字段
        resImgList.forEach((x) => (x.isDefault = 0))
        this.spuImageList = resImgList
      }
      // 获取销售属性的数据
      const res2 = await this.$api.sku.reqSaleAttrList(row.id)
      console.log(res2)
      if (res2.code === 200) {
        this.spuSaleAttrList = res2.data
      }
      // 获取平台属性的数据
      const res3 = await this.$api.sku.reqAttrInfoList(category1Id, category2Id, category3Id)
      console.log(res3)
      if (res3.code === 200) {
        this.attrInfoList = res3.data
      }
    },
    // 图片列表复选框事件
    handleSelectionChange(row) {
      // console.log(row)
      // 需要存储当前已选中的图片对象(看笔记)
      // 获取到用户选中图片的信息数据,但是需要注意,当前手机的数据当中,缺少 isDefault字段
      this.spuImg = row
    },
    // 排他 设为默认 | 默认
    changeDefault(row) {
      // 把全部设置为 设为默认
      this.spuImageList.forEach((item) => (item.isDefault = 0))
      // 给当前选中项的赋值
      row.isDefault = 1
      // 给默认图片赋值
      this.skuInfo.skuDefaultImg = row.imgUrl
    },
    // 点击取消按钮事件
    changeScene() {
      this.$emit('changescene', 0)
      // 清除数据
      Object.assign(this._data, this.$options.data())
    },
    // 发送 sku 请求
    async saveSkuInfo() {
      // 整理平台属性对象 方式1
      // const arr = []
      // this.attrInfoList.forEach((item) => {
      //   if (item.attrOrValueId) {
      //     const [attrId, valueId] = item.attrOrValueId.split(':')
      //     const obj = { attrId, valueId }
      //     console.log(obj)
      //     arr.push(obj)
      //   }
      // })
      // this.skuInfo.skuAttrValueList = arr
      // 整理平台属性对象 方式2
      this.skuInfo.skuAttrValueList = this.attrInfoList.reduce((prev, item) => {
        // 有则证明用户选择完了
        if (item.attrOrValueId) {
          // 结构赋值
          const [attrId, valueId] = item.attrOrValueId.split(':')
          // 累加
          prev.push({ attrId, valueId })
        }
        return prev
      }, [])
      // 整理销售属性（和上面套路一样）
      this.skuInfo.skuSaleAttrValueList = this.spuSaleAttrList.reduce((prev, item) => {
        if (item.saleIdOrValueId) {
          const [saleAttrId, saleAttrValueId] = item.saleIdOrValueId.split(':')
          prev.push({ saleAttrId, saleAttrValueId })
        }
        return prev
      }, [])
      // 整理照片数组
      this.skuInfo.skuImageList = this.spuImageList.map((item) => {
        return {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id,
        }
      })
      const res = await this.$api.sku.reqSaveSkuInfo(this.skuInfo)
      console.log(res)
      if (res.code === 200) {
        this.$message({ type: 'success', message: '添加成功' })
        this.$emit('changescene', 0)
      }
    },
  },
}
</script>

<style></style>
